<template>
  <div class="scroll_box"> 
    <scroll-view class="scroll-view_x" scroll-x style="width: auto;overflow:hidden;" @scroll="scroll1">

      <div class="item_list" v-for="(value,index) in motto" v-bind:style="{'width': value.imgStyle.width}">
        <img :src="arry[index] || motto1[index] ? value.imgSrc :''" :class="arry[index] ? 'action' :''" v-bind:style="{'height':value.imgStyle.height, 'width': value.imgStyle.width}" @click='goDetails(value.imgSrc,value.tag,value.shopId)' v-if="value.content1 != ''|| value.content2!= '' " mode="aspectFill"/>

        <div v-else   v-bind:style="{'height':value.imgStyle.height, 'width': value.imgStyle.width}"  @click='goDetails(value.imgSrc,value.tag,value.shopId)' class="relat">
          <image :src="arry[index] || motto1[index] ? value.imgSrc :''"  @click='goDetails(value.imgSrc,value.tag,value.shopId)' mode="aspectFill" v-bind:style="{'height':value.imgStyle.height, 'width': value.imgStyle.width}"></image>
        </div>
        <div class="scrollText" v-show="value.content1 == ''? false : true">{{value.content1}}</div>
        <div class="scrollDesign" v-show="value.content2 == ''? false : true" @click="goDetails(value.imgSrc,value.tag,value.shopId)">{{value.content2}}</div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
export default {
  props:['motto','motto1'],
  data () {
    return {
      arry:[],
    }
  },
  methods:{
    scroll1(e){    //这里是计算当前向左滑到哪个位置  哪个位置的就显示图片
      var _this=this;
      _this.arry=_this.motto1  
      //这里加这个是为了实时更新数据的数据  如果不是的话  就算改变motto数组的数据 在view中也不会渲染更新
      var showIndex=parseInt((e.target.scrollLeft+80)/(parseInt(_this.motto[0].imgStyle.width.slice(0,-2))+15));  
      // console.log(_this.motto1)
      _this.arry.splice(2+showIndex,1,true); 
      //或者this.$set(_this.arry,2+showIndex,true)   data中的数组数据要通过这样的方式才能双向绑定到view上
    },
    goDetails(img_src,tag,shopId){    //如果是点击自定义定制按钮,tag=0,那么就跳转到shop页面
      if(tag==0)
      {
        wx.navigateTo({
          url:'/pages/shop/main?shopId='+shopId
        })
      }else{
        wx.previewImage({
        current:img_src,
        urls:[img_src]
      })
      }
    }
  },
  watch:{
    motto:function(newValue,oldValue){
      // console.log(newValue)
      // // this.motto=newValue;
    }
  }
}
</script>

<style scoped>
.scroll_box{width: 100%;overflow: hidden;white-space: nowrap;padding-bottom: 10px;background: #fff;padding-top: 9px}
.item_list{width: 145px;display: inline-block;margin-right: 8px;margin-left: 7px}
.scrollImg{width: 145px;height: 125px;transition: opacity 0.4s linear 0.4s;opacity: 0;}
.action {opacity: 1;width: 145px;height: 125px;transition: opacity 0.4s linear 0.4s;}
.scrollText{width: 100px;height: 30px;line-height: 30px;text-align: center;font-size: 10px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.scrollDesign{width: 100px;height: 20px;line-height: 20px;text-align: center;font-size: 12px;font-weight: 700}
</style>